<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	<gridMenu :gridItems="gridItems" count="4" ptop="70rpx" mbottom="10rpx" gap="0rpx" />

	<view class="page-container">
		<!-- 今日服务工单部分 -->
		<view class="today-service" style="margin-bottom: 200rpx;">
			<view class="section-header">
				<text class="title text13">今日服务工单</text>
				<text class="count text13">{{ workOrders?.length }}单</text>
			</view>

			<!-- 工单列表 -->
			<view class="order-list">
				<!-- 工单项 -->
				<view class="order-item" v-for="(order, index) in workOrders" :key="index" @click="handleDetail(order)">
					<view class="order-header">
						<view class="order-number">
							<text class="text12">服务时间：{{ order.serviceTime }}</text>
						</view>
						<view class="order-status text12" :class="order.statusClass">
							{{ order.statusText }}
						</view>
					</view>

					<view class="order-info">
						<view class="info-row text11">
							<text class="label">姓名：</text>
							<text class="value">{{ order.customerName }}</text>
						</view>
						<!-- <view class="info-row text11">
							<text class="label">员工姓名：</text>
							<text class="value">小木</text>
						</view> -->
						<view class="info-row text11">
							<text class="label">服务类型：</text>
							<text class="value">{{ order.serviceType }}</text>
						</view>
						<view class="info-row text11">
							<text class="label ">联系电话：</text>
							<text class="value">{{ order.phone }}</text>
						</view>
						<view class="info-row text11">
							<text class="label">地址：</text>
							<text class="value">{{ order.address }}</text>
						</view>
					</view>

				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="workOrders.length === 0">
					<wd-icon name="order-o" size="60" color="#ccc"></wd-icon>
					<text class="empty-text">今日暂无服务工单</text>
					<wd-button type="primary" size="small" @click="grabOrder">去抢单</wd-button>
				</view>
			</view>
		</view>
	</view>

	<!-- <SimpleTabBar /> -->
	<!-- 	<TabComponent :tabs="currentTabs" @change="onTabChange" /> -->
	<TabComponent :tabs="currentTabs" @change="onTabChange" />

</template>

<script setup>
import gridMenu from "@/components/grid-menu/index"

import {
	my_workorderApi
} from "@/api/volunteer"

import {
	ref,
	onMounted,
	computed,
	nextTick
} from 'vue';
import {
	useRouter
} from 'uni-mini-router'

import { onShow } from '@dcloudio/uni-app';



import {
	useFontSizeStore
} from '@/stores/fontSizeStore';
const fontSizeStore = useFontSizeStore();
import {
	useTabStore
} from '@/stores/tabs'
import {
	ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'

import { useShare } from '@/utils/useShare';
import { getAppEnum } from "@/utils/appDataEnum"


// 配置分享内容
const { onShareAppMessage, onShareTimeline } = useShare({
	title: '欢迎',
	path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
	imageUrl: '/static/share-cover.jpg',
	query: '' // 朋友圈参数（可选）
});


const tabStore = useTabStore()
const router = useRouter();

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
	const role = getApp()[getAppEnum.CurrentRole];
	return ROLE_TABS[role]?.tabs
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
	nextTick(() => {
		router.pushTab({
			name: tab.key
		})
	})
}

// 工单列表数据 - 使用ref定义响应式数据
const workOrders = ref([]);

onMounted(() => {
 
	my_workorderApi({
		id: 1
	}).then((res) => {
		if (res.code == 200) {
			workOrders.value = res.data
		}
	})
})

const gridItems = ref([{
	iconClass: 'order-icon',
	iconName: 'icon-xiadan4',
	text: '订单管理',
	pathName: "common_orderList"
},
{
	iconClass: 'urgent-icon',
	iconName: 'icon-yijian',
	text: '一键抢单',
	pathName: "common_pointsSupermarket",
	name: "qiangdan"
},
{
	iconClass: 'dispatch-icon',
	iconName: 'icon-fuwujilu3',
	text: '服务记录',
	pathName: "common_serviceRecord"
},
{
	iconClass: 'record-icon',
	iconName: 'icon-fuwujilu-',
	text: '积分超市',
	pathName: "common_pointsSupermarket",
	name: "jifen_chaoshi"
}
]);

// 任务中心按钮事件
const handleOrderManage = () => {
	console.log('点击订单管理');
	// 实际应用中可使用uni.navigateTo跳转
};
const navigationUrl = (item) => {
	router.push({
		name: item.pathName,
		params: {
			name: item.pathName
		}
	})
}

 
const handleOneKeyGrab = () => {
	console.log('点击一键抢单');
};

const handleServiceRecord = () => {
	console.log('点击服务记录');
};

const handleIntegralSupermarket = () => {
	console.log('点击积分超市');
};

// 工单相关事件
const handleContact = (phone) => {
	console.log('联系客户:', phone);
	// 调用拨号功能
	uni.makePhoneCall({
		phoneNumber: phone
	});
};

const handleDetail = (order) => {
	console.log('查看详情:', order);
	// 跳转到详情页示例
	// uni.navigateTo({
	//   url: `/pages/orderDetail/index?orderNo=${order.orderNo}`
	// });
	router.push({
		name: "volunteer_serverDetail",
		params: {
			orderNo: order.orderNo
		}
	})
};

const handleAction = (order) => {
	console.log('执行操作:', order);
};

const grabOrder = () => {
	console.log('去抢单');
};

// 开始服务
const startService = (order) => {
	// 实际应用中这里会调用接口更新订单状态

};
</script>

<style scoped lang="less">
@import '@/static/styles/volunteer/home/index.less';
@import '@/static/styles/commerce/home/grid_menu_items.less';

.page-container {
	padding: 30rpx;
}

/* 工单列表样式 */
.order-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.order-item {
	border-radius: 12rpx;
	padding: 20rpx;
	background-color: #fff;
}

.order-header {
	display: flex;
	justify-content: space-between;
	padding-bottom: 15rpx;
	padding-top: 15rpx;
	border-bottom: 1px solid #f5f5f5;
}

.order-number {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.order-status {
	font-size: 26rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	font-weight: 500;
}

.status-pending {
	background-color: #fff7e6;
	color: #ff9d00;
}

.status-processing {
	background-color: #e6f7ff;
	color: #1890ff;
}

.status-completed {
	background-color: #f6ffed;
	color: #52c41a;
}

.order-info {
	line-height: 60rpx;
}

.info-row {
	display: flex;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	font-size: 26rpx;
}

.label {
	color: #666;
}

.value {
	color: #333;
	flex: 1;
	word-break: break-all;
}

.order-actions {
	display: flex;
	gap: 12rpx;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 0;
	color: #999;
}

.empty-text {
	margin: 20rpx 0;
	font-size: 28rpx;
}

.section-header {
	margin-top: 50rpx;
	margin-bottom: 20rpx;


	.title {
		font-weight: 500;
	}
}
</style>